import React, {Component} from 'react'
import {observer} from 'mobx-react';
import { Tools, SearchBar, Icon, Popover } from "weaver-mobile";
import { withRouter, Link, Route } from 'react-router-dom';
import AdvanceSearchPage from './AdvanceSearchPage';
const getLabel = Tools.getLabel;
const Item = Popover.Item;

@withRouter
@observer
export default class SearchCondition extends Component{
    render(){
        const {store} = this.props;
        const {initialPage, showPop, alllevel, isNoAccount, setShowPop, onPopoverSelectHandle, doQuickSearch, onQuickSearchChangeHandle, onClearSearchCondition, advanceSearchPageStore} = store;
        const {form: {formParams}} = advanceSearchPageStore;
        let extraButtons = [];
        if(initialPage == 2){
            extraButtons.push({
                key: 'drop',
                show: <Popover
                  visible={showPop}
                  overlay={
                    [
                        <Item key="alllevel">{alllevel ? getLabel(390066, '隐藏下级下属') : getLabel(83783, '显示下级下属')}</Item>,
                        <Item key="isNoAccount">{isNoAccount ? getLabel(523844, '隐藏无帐号人员') : getLabel(523845, '显示无帐号人员')}</Item>
                    ]
                }
                  onSelect={onPopoverSelectHandle}
                  onVisibleChange={setShowPop}
                >
                  <Icon key="ellipsis" type="ellipsis" />
                </Popover>,
              });
        }else{
            extraButtons.push({
                key: 'drop',
                show: <Popover
                  visible={showPop}
                  overlay={
                    [
                        <Item key="isNoAccount">{isNoAccount ? getLabel(523844, '隐藏无帐号人员') : getLabel(523845, '显示无帐号人员')}</Item>
                    ]
                }
                  onSelect={onPopoverSelectHandle}
                  onVisibleChange={setShowPop}
                >
                  <Icon key="ellipsis" type="ellipsis" />
                </Popover>,
              });
        }

        const searchBarProps = {
            value: formParams.lastname,
            placeholder: getLabel(510178, '请输入姓名/首字母/全拼/电话/编号'),
            onSubmit: doQuickSearch,
            onChange: onQuickSearchChangeHandle,
            onClear: onClearSearchCondition,
            maxLength: 100,
            showExtraButton: true,
            extraButton: [
                {
                    key: 'advanceSearch',
                    show: <Link to={store.advanceSearchPageStore.path}><Icon type='filter-o'/></Link>
                },
                ...extraButtons
            ]
        }
        return (
            <div>
                <SearchBar {...searchBarProps} />
                <Route path={advanceSearchPageStore.path} render={() => <AdvanceSearchPage store={store}/>} />
            </div>
        )
    }
}